<template>
	<view :style="{paddingTop:navHeight}">
		<view class="top-nav-box" :style="{height:navHeight, paddingTop:statusBarHeight}">
			<image class="top-nav-home" src="../../../static/images/icon_float_home.png" @click="goHome"></image>
			<text class="top-nav-title">优惠券详情</text>
			<view style="width: 58rpx;"></view>
		</view>
		<view class="coupon-member-wrap" :style="{top:navHeight}">
			<image :src="backImage" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="coupon-member-btns">
			<router-link v-if="couponHas==1&&couponNum==0" to="/bundle/pages/user_coupon/user_coupon">
				<view class="coupon-btn">已领取</view>
			</router-link>
			<view v-else-if="couponHas==1&&couponNum>0" class="coupon-btn" @click="getScanCouponFun()">继续领取</view>
			<template v-else>
				<view class="coupon-btn" v-if="status==1" @click="getScanCouponFun()">领取专属优惠券</view>
				<view class="coupon-btn" style="font-size: 32rpx;" v-else @click="goContract()">限加企业微信会员领取</view>
				<view class="member-btn" @click="goContract()">联系客服获取更多福利</view>
			</template>
		</view>
		<view class="coupon-member-item">
			<view class="price">
				<text style="font-size: 84rpx;">{{money}}</text>
				<text style="font-size: 34rpx;">元</text>
			</view>
			<view class="info">
				<view style="font-size: 36rpx;font-weight: 700;">{{nameBuy}}</view>
				<view style="margin-top: 20rpx;font-size: 25rpx;color: #aa8c72;">{{useMin>0?"指定商品满"+useMin+"元使用":"无门槛"}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		strToParams
	} from "@/utils/tools";
	import {
		imagePath
	} from '@/config/app';
	import {
		getCouponDetail,
		grabCoupon,
		checkGrabStatus,
		checkAddCustomerService
	} from "@/api/activity";
	import {
		getIsMember
	} from '@/api/user';
	import {
		BACK_URL,
		QUERY_CODE
	} from "@/config/cachekey";
	import Cache from "@/utils/cache";
	import {
		GetWxMiniProgramUrlParam
	} from '@/utils/tools'
	export default {
		data() {
			return {
				imagePath: imagePath,
				id: '', //33
				status: 0,
				couponHas: 0,
				couponNum: 0,
				backImage: '',
				money: "",
				useMin: "",
				nameBuy: "",
				ifAct: true,
				checkStatusCount: 0,
				checkStatusTimer: null
			}
		},
		computed: {
			...mapGetters(['sysInfo']),
			statusBarHeight() {
				return this.sysInfo.statusBarHeight + 'px'
			},
			navHeight() {
				return this.sysInfo.navHeight + 'px'
			},
			marginTop() {
				return '-' + (this.sysInfo.navHeight) + 'px'
			},
		},
		async onLoad(options) {
			await this.$onLaunched;

			let opt = Cache.get(QUERY_CODE);
			if (opt.q) {
				const url = decodeURIComponent(opt.q);
				let params = GetWxMiniProgramUrlParam(url); //获取二维码路径参数
				this.id = params.id;
			} else {
				this.id = opt.id;
			}
			this.getMemberInfoFun();
		},
		methods: {
			async getMemberInfoFun() {
				const {
					data,
					code
				} = await getIsMember(this.token);
				if (code == -1) {
					Cache.set(BACK_URL, '/bundle/pages/get_coupon_member/get_coupon_member?id=' + this.id)
					uni.navigateTo({
						url: '/pages/login/login'
					});
				} else if (code == 1) {
					this.getCouponDetailFun();
					this.checkAddCustomerServiceFun();
				} else if (code == 0) {
					Cache.set(BACK_URL, '/bundle/pages/get_coupon_member/get_coupon_member?id=' + this.id)
					uni.switchTab({
						url: '/pages/member_centre/member_centre'
					});
					uni.reLaunch({
						url: '/pages/member_centre/member_centre',
					})
				}
			},
			getCouponDetailFun() {
				getCouponDetail({
					coupon_id: this.id
				}).then((res) => {
					if (res.code == 1) {
						this.couponHas = res.data.coupon_has;
						this.couponNum = res.data.coupon_num;
						this.backImage = res.data.get_back_wx_image;
						this.nameBuy = res.data.name_buy;
						this.money = res.data.money;
						this.useMin = res.data.use_min;
					} else {
						this.$toast({
							title: res.msg
						});
					}
				});
			},
			checkAddCustomerServiceFun() {
				checkAddCustomerService().then((res) => {
					if (res.code == 1) {
						this.status = res.data.status
					} else {
						this.$toast({
							title: res.msg
						});
					}
				});
			},
			async getScanCouponFun() {
				if (this.ifAct) {
					this.ifAct = false;
					let res = await grabCoupon(this.id);
					if (res.code == 1) {
						this.checkStatusCount = 0
						this.checkGrabStatusFun(res.data.job_id)
					} else {
						this.ifAct = true;
						this.$toast({
							title: res.msg
						});
						if (res.data.status == "need_mobile") {
							setTimeout(() => {
								this.$Router.push({
									path: "/bundle/pages/user_profile/user_profile"
								})
							}, 2000)
						}
					}
				}
			},
			async checkGrabStatusFun(id) {
				let that = this;
				let resStatus = await checkGrabStatus(id);
				clearTimeout(that.checkStatusTimer)
				that.checkStatusCount++;
				if (resStatus.code != 1 && that.checkStatusCount < 5) {
					if (resStatus.data.status == "pending") {
						this.$toast({
							title: resStatus.msg
						});
						that.checkStatusTimer = setTimeout(() => {
							that.checkGrabStatusFun(id);
						}, 1000)
					} else if (resStatus.data.status == "fail") {
						this.$toast({
							title: resStatus.msg
						});
						that.checkStatusTimer = null;
						this.ifAct = true;
						this.getMemberInfoFun();
					}
				} else {
					this.$toast({
						title: resStatus.msg
					});
					that.checkStatusTimer = null;
					this.ifAct = true;
					this.getMemberInfoFun();
				}
			},
			goContract() {
				this.$Router.push({
					path: '/bundle/pages/qrcode_detail/qrcode_detail?qrcode=https://bsbyshop-new1.oss-cn-hangzhou.aliyuncs.com/uploads/images/20240918/202409181059137199a0286.jpg',
				});
			},
			goHome() {
				uni.switchTab({
					url: "/pages/index/index"
				});
			}
		},
		async onShareAppMessage() {
			return {
				title: "优惠券详情",
				path: "/bundle/pages/get_coupon_member/get_coupon_member?id=" + this.id + "&share=1",
			};
		},
	}
</script>

<style lang="scss">
	.top-nav-box {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 32rpx;
		top: 0;
		z-index: 1;

		.top-nav-home {
			width: 58rpx;
			height: 58rpx;
		}

		.top-nav-title {
			flex: 1;
			font-size: 28rpx;
			font-weight: 700;
			color: #303030;
			text-align: center;
		}
	}

	.coupon-member-btns {
		position: fixed;
		width: 100%;
		bottom: 350rpx;
		text-align: center;

		.coupon-btn {
			display: inline-block;
			width: 392rpx;
			height: 88rpx;
			background-color: #f0552a;
			border-radius: 88rpx;
			box-shadow: 0px 3px 6px rgba(240, 85, 42, 0.5);
			font-size: 42rpx;
			color: #fdd4aa;
			line-height: 88rpx;
		}

		.member-btn {
			display: inline-block;
			width: 392rpx;
			height: 88rpx;
			margin-top: 30rpx;
			background-color: #fff;
			border-radius: 88rpx;
			border: solid 1px #f0552a;
			font-size: 32rpx;
			color: #f0552a;
			line-height: 88rpx;
		}
	}

	.coupon-member-item {
		position: fixed;
		display: flex;
		align-items: center;
		width: 96%;
		height: 206rpx;
		bottom: 90rpx;
		margin: 0 2%;
		background: url(../../static/coupon_list_bg_white.png) no-repeat;
		background-size: 100% 100%;

		.price {
			width: 230rpx;
			color: #f14023;
			text-align: center;
		}

		.info {
			margin-left: 60rpx;
		}
	}
</style>